<template>
  <el-dialog
    title="开票详情"
    :visible.sync="dialogFormVisible"
    :width="!old_invoice_info ? '600px' : '1000px'"
  >
    <el-form
      ref="dataForm"
      label-position="left"
      label-width="100px"
      style="margin: 0 30px"
      v-if="!old_invoice_info"
    >
      <template>
        <el-form-item label="税号">
          <p>{{ curr_invoice_info?.invoice_content?.tax_no || '' }}</p>
        </el-form-item>
        <el-form-item label="企业名称">
          <p>{{ curr_invoice_info?.invoice_content?.title || '' }}</p>
        </el-form-item>
        <el-form-item label="关联订单号">
          <p
            v-if="curr_invoice_info?.related_orders && curr_invoice_info?.related_orders.length > 0"
          >
            {{ curr_invoice_info.related_orders.join(',') }}
          </p>
        </el-form-item>
        <el-form-item label="开户行帐号">
          <p>{{ curr_invoice_info?.invoice_content?.bank_account || '' }}</p>
        </el-form-item>
        <el-form-item label="开户行地址">
          <p>{{ curr_invoice_info?.invoice_content?.bank_address || '' }}</p>
        </el-form-item>
        <el-form-item label="电子邮箱">
          <p>{{ curr_invoice_info?.invoice_content?.email || '' }}</p>
        </el-form-item>
        <el-form-item label="开票金额">
          <p>{{ curr_invoice_info?.amount + '元' || '' }}</p>
        </el-form-item>
        <el-form-item label="开票创建时间">
          <p>{{ curr_invoice_info?.add_time || '' }}</p>
        </el-form-item>
        <el-form-item label="开票状态">
          <template v-if="curr_invoice_info.status">
            <el-tag
              :type="
                curr_invoice_info.status === 'invoiced'
                  ? 'success'
                  : curr_invoice_info.status === 'not_invoiced'
                  ? 'danger'
                  : 'info'
              "
              >{{ $invoiceStatus[curr_invoice_info.status] }}
            </el-tag>
          </template>
        </el-form-item>
        <div
          class="mark"
          v-if="
            curr_invoice_info.status === 'not_invoiced' ||
            curr_invoice_info.status === 're_invoice_review'
          "
        >
          <el-button type="primary" size="mini" @click="markInvoice">标记开票</el-button>
        </div>
      </template>
    </el-form>
    <!-- <div v-else>
      
    </div> -->
    <el-row :gutter="20" v-else>
      <el-col :span="12"
        ><div class="detail new_invoice">
          <div class="title">新发票</div>
          <ul>
            <li>
              <p class="label">税号:</p>
              <p>{{ curr_invoice_info?.invoice_content?.tax_no || '' }}</p>
            </li>
            <li>
              <p class="label">企业名称:</p>
              <p>{{ curr_invoice_info?.invoice_content?.title || '' }}</p>
            </li>
            <li>
              <p class="label">关联订单号:</p>
              <p v-if="curr_invoice_info?.related_orders.length > 0">
                {{ curr_invoice_info?.related_orders.join(',') }}
              </p>
            </li>
            <li>
              <p class="label">开户行帐号:</p>
              <p>{{ curr_invoice_info?.invoice_content?.bank_account || '' }}</p>
            </li>
            <li>
              <p class="label">开户行地址:</p>
              <p>{{ curr_invoice_info?.invoice_content?.bank_address || '' }}</p>
            </li>
            <li>
              <p class="label">电子邮箱:</p>
              <p>{{ curr_invoice_info?.invoice_content?.email || '' }}</p>
            </li>
            <li>
              <p class="label">开票金额:</p>
              <p>{{ curr_invoice_info?.amount + '元' || '' }}</p>
            </li>
            <li>
              <p class="label">开票创建时间:</p>
              <p>{{ curr_invoice_info?.add_time || '' }}</p>
            </li>
            <li>
              <p class="label">发票是否重开:</p>
              <el-tag :type="curr_invoice_info.is_re_invoice ? 'danger' : 'success'"
                >{{ curr_invoice_info?.is_re_invoice ? '是' : '否' }}
              </el-tag>
            </li>
            <li>
              <p class="label">开票状态:</p>
              <template v-if="curr_invoice_info.status"
                ><el-tag :type="curr_invoice_info.status === 'invoiced' ? 'success' : 'info'"
                  >{{ $invoiceStatus[curr_invoice_info.status] }}
                </el-tag></template
              >
            </li>
          </ul>
        </div>
        <div
          class="mark"
          v-if="
            curr_invoice_info.status === 'not_invoiced' ||
            curr_invoice_info.status === 're_invoice_review'
          "
        >
          <el-button type="primary" size="mini" @click="markInvoice">标记开票</el-button>
        </div>
      </el-col>
      <el-col :span="12"
        ><div class="detail old_invoice">
          <div class="title">旧发票</div>
          <ul>
            <li>
              <p class="label">税号:</p>
              <p>{{ old_invoice_infos?.invoice_content?.tax_no || '' }}</p>
            </li>
            <li>
              <p class="label">企业名称:</p>
              <p>{{ old_invoice_info?.invoice_content?.title || '' }}</p>
            </li>
            <li>
              <p class="label">关联订单号:</p>
              <p v-if="curr_invoice_info?.related_orders.length > 0">
                {{ old_invoice_info?.related_orders.join(',') }}
              </p>
            </li>
            <li>
              <p class="label">开户行帐号:</p>
              <p>{{ old_invoice_info?.invoice_content?.bank_account || '' }}</p>
            </li>
            <li>
              <p class="label">开户行地址:</p>
              <p>{{ old_invoice_info?.invoice_content?.bank_address || '' }}</p>
            </li>
            <li>
              <p class="label">电子邮箱:</p>
              <p>{{ old_invoice_info?.invoice_content?.email || '' }}</p>
            </li>
            <li>
              <p class="label">开票金额:</p>
              <p>{{ old_invoice_info?.amount + '元' || '' }}</p>
            </li>
            <li>
              <p class="label">开票创建时间:</p>
              <p>{{ old_invoice_info?.add_time || '' }}</p>
            </li>
            <li>
              <p class="label">发票是否重开:</p>
              <el-tag :type="old_invoice_info.is_re_invoice ? 'danger' : 'success'"
                >{{ old_invoice_info?.is_re_invoice ? '是' : '否' }}
              </el-tag>
            </li>
            <li>
              <p class="label">开票状态:</p>
              <template v-if="old_invoice_info.status"
                ><el-tag
                  :type="
                    old_invoice_info.status === 'invoiced'
                      ? 'success'
                      : old_invoice_info.status === 'not_invoiced'
                      ? 'danger'
                      : 'info'
                  "
                  >{{ $invoiceStatus[old_invoice_info.status] }}
                </el-tag></template
              >
            </li>
          </ul>
        </div></el-col
      >
    </el-row>
  </el-dialog>
</template>

<script>
import { getDetail, markInvoiced } from '@/api/invoices'
export default {
  name: 'InvoiceDetail',
  data() {
    return {
      dialogFormVisible: false,
      id: '',

      old_invoice_info: null,
      curr_invoice_info: {}
    }
  },

  created() {},
  methods: {
    handleDetail(id) {
      getDetail(id).then((res) => {
        console.log(res.data)
        this.old_invoice_info = res.data.old_invoice_info
        this.curr_invoice_info = res.data.curr_invoice_info
        this.id = id
        this.dialogFormVisible = true
      })
    },
    markInvoice() {
      this.$confirm('确认标记开票么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          markInvoiced(this.id).then(() => {
            this.$parent.fetchData()
            this.dialogFormVisible = false
            this.$parent.$notify({
              title: '成功',
              message: '标记开票成功',
              type: 'success'
            })
          })
        })
        .catch(() => {})
    }
  }
}
</script>
<style scoped lang="less">
.item-p {
  margin: 0;
  /* height: 1px; */
}
.detail {
  .title {
    height: 36px;
    line-height: 36px;
    border-radius: 6px;
    padding-left: 20px;
  }
  ul,
  li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  ul {
    li {
      display: flex;
      height: 40px;
      line-height: 40px;
      height: 40px;
      padding-left: 20px;
      &:nth-child(2n) {
        background-color: #f9fafe;
      }
      .label {
        width: 120px;
      }
      align-items: center;
    }
  }
}
.new_invoice {
  .title {
    background-color: #e6edff;
    color: #7180a7;
  }
}
.old_invoice {
  .title {
    background-color: #ebebeb;
    color: #666;
  }
}
.mark {
  margin: 11px auto;
  display: flex;
  justify-content: center;
}
</style>
